<template>
  <div class="artist-category">
	<base-info :baseInfo="baseInfo"></base-info>
	  <el-tabs v-model="activeName" @tab-click="handleClick">
	    <el-tab-pane label="专辑" name="first">
			<el-row>
				<el-col :span="4">
					<el-image :src="img1v1Url"></el-image>
				</el-col>
				<el-col :span="20">
					<song-list :songsList="songsList" :artistDetail="flag"></song-list>
				</el-col>
			</el-row>
		</el-tab-pane>
		<el-tab-pane label="MV"  name="second">
		  <mv :mvsList="mvsList"></mv>
		</el-tab-pane>
	    <el-tab-pane label="歌手详情" name="third">
			<singer-introduction :introduction="introduction" :briefDesc="baseInfo.briefDesc"></singer-introduction>
		</el-tab-pane>
		<el-tab-pane label="相似歌手" name="four">
			<simi :simiList="simiList"></simi>
		</el-tab-pane>
	  </el-tabs>
  </div>
</template>

<script>

import {_getArtistDesc,_getArtistDetail,_getArtistMv,_getArtistAlbum,_getArtistSong,_getSimi} from 'network/artist.js'
import {_getSongsDetail,songDetail} from 'network/detail.js'
import BaseInfo from './childsPage/base-info.vue'
import Mv from './childsPage/mv.vue'
import SingerIntroduction from './childsPage/singer-introduction.vue'
import Simi from './childsPage/simi.vue'
import SongList from 'components/common/song-list/song-list'


export default {
  name:'ArtistDetail',
  components:{BaseInfo,SongList,Mv,SingerIntroduction,Simi},
  data(){
    return{
		baseInfo:{
			briefDesc:null,
			videoCount:null,
			mvCount:null,
			hotAlbumsCount:null,
			name:null,
			cover:null,
			albumSize:null,
		},
		songsList:[],
		activeName:'first',
		hotSongsList:[],
		img1v1Url:null,
		flag:true,
		mvsList:[],
		introduction:[],
		simiParams:{
			id:0,
		},
		simiList:[]
    }
  },
  created(){
	  this.getList();
	 
	  // console.log(this.$route.params.id)
  },
  methods:{
	  getList(){
		  console.log(111)
		  const params = {id:this.$route.params.id}
		 _getArtistDesc(params).then(res=>{
			 this.baseInfo.briefDesc = res.data.briefDesc
			 this.introduction = res.data.introduction
		 }) 
		 _getArtistDetail(params).then(res=>{
			 this.baseInfo.videoCount = res.data.data.videoCount;
			 this.baseInfo.cover = res.data.data.artist.cover
			 this.baseInfo.albumSize = res.data.data.artist.albumSize
		 })
		
		 _getArtistAlbum(params).then(res=>{
			 this.baseInfo.hotAlbumsCount = res.data.hotAlbums.length  
			 this.img1v1Url = res.data.artist.picUrl
			 this.baseInfo.name = res.data.artist.name
			 
		 })
		 _getArtistSong(params).then(res=>{
			this.hotSongsList = res.data.songs
			for(let i in this.hotSongsList){
			   let id = this.hotSongsList[i].id
				_getSongsDetail(id).then(res=>{
					  let song = new songDetail(res.data.songs);
					  this.songsList.push(song)
					  this.songCount = res.data.length;
					  console.log(this.songCount)
				})
			}
		 })
	  },
	  handleClick(tab, event) {
		 if(tab.name==="second"){
			  const params = {id:this.$route.params.id}
			_getArtistMv(params).then(res=>{
				this.mvsList = res.data.mvs
			})
		 }
	    if(tab.name==="four"){
	    	this.simiParams.id=this.$route.params.id
	    	_getSimi(this.simiParams).then(res=>{
				console.log(res)
	    	 this.simiList = res.data.artists
	    	})
	    }
	  },
  }
}
</script>

<style lang="less" scoped>
.artist-category{
	padding: 10px 30px 0 30px;
}

/deep/ .el-button {
	padding: 0;
}
</style>